{% extends 'base.html' %}
{% load static %}

{% block title %}{{ product_type.name }} - 商城系统{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/new_category_nav.css' %}">
<style>
    .category-header {
        background-color: #f8f9fa;
        padding: 20px 0;
        margin-bottom: 20px;
        border-radius: 5px;
    }
    
    .category-title {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 10px;
        color: #333;
    }
    
    .filter-section {
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 5px;
    }
    
    .filter-title {
        font-weight: 600;
        margin-bottom: 10px;
    }
    
    .sort-btn {
        padding: 5px 15px;
        border-radius: 15px;
        margin-right: 5px;
        font-size: 14px;
    }
    
    .product-card {
        transition: transform 0.3s, box-shadow 0.3s;
        height: 100%;
        border: 1px solid #eee;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .product-img {
        height: 200px;
        object-fit: contain;
        padding: 10px;
        background-color: #fff;
    }
    
    .price {
        color: #e74c3c;
        font-weight: bold;
        font-size: 1.1rem;
    }
    
    .original-price {
        color: #95a5a6;
        text-decoration: line-through;
        font-size: 0.9rem;
        margin-left: 5px;
    }
    
    .category-card {
        text-align: center;
        padding: 1.2rem;
        border-radius: 10px;
        transition: all 0.3s ease;
        height: 100%;
        box-shadow: 0 3px 10px rgba(0,0,0,0.08);
        background-color: #fff;
    }
    
    .category-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .category-icon {
        font-size: 2rem;
        margin-bottom: 0.8rem;
        color: #007bff;
    }
    
    .section-title {
        position: relative;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        font-size: 1.5rem;
        font-weight: 600;
    }
    
    .section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 3px;
        background-color: #007bff;
    }
</style>
{% endblock %}

{% block content %}
<!-- 分类导航 -->
<div class="container mt-3">
    <div class="row">
        <!-- 内容区域，调整为占据整个宽度 -->
        <div class="col-12">
            <!-- 分类标题 -->
            <section class="category-header">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{% url 'index' %}">首页</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'category' product_type.subcategory.category.id %}">{{ product_type.subcategory.category.name }}</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'subcategory' product_type.subcategory.id %}">{{ product_type.subcategory.name }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ product_type.name }}</li>
                    </ol>
                </nav>
                
                <h1 class="category-title">{{ product_type.name }}</h1>
                <!-- <p class="text-muted">{{ product_type.description|default:'' }}</p> -->
            </section>

            <!-- 筛选和排序 -->
            <div class="filter-section">
                <div class="row align-items-center">
                    <div class="col-md-2">
                        <div class="filter-title">排序方式：</div>
                    </div>
                    <div class="col-md-10">
                        <div class="btn-group" role="group">
                            <a href="?sort=default" class="btn btn-outline-primary sort-btn {% if current_sort == 'default' or not current_sort %}active{% endif %}">默认</a>
                            <a href="?sort=sales" class="btn btn-outline-primary sort-btn {% if current_sort == 'sales' %}active{% endif %}">销量 <i class="bi bi-arrow-down"></i></a>
                            <a href="?sort=price_asc" class="btn btn-outline-primary sort-btn {% if current_sort == 'price_asc' %}active{% endif %}">价格 <i class="bi bi-arrow-up"></i></a>
                            <a href="?sort=price_desc" class="btn btn-outline-primary sort-btn {% if current_sort == 'price_desc' %}active{% endif %}">价格 <i class="bi bi-arrow-down"></i></a>
                            <a href="?sort=rating" class="btn btn-outline-primary sort-btn {% if current_sort == 'rating' %}active{% endif %}">评分 <i class="bi bi-arrow-down"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 商品列表 -->
            <div class="row mb-4">
                {% for product in page_obj %}
                <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                    <div class="card product-card">
                        <a href="{% url 'product_detail' product.id %}">
                            <img src="{{ product.get_main_image_url }}" class="card-img-top product-img" alt="{{ product.name }}">
                        </a>
                        <div class="card-body">
                            <h5 class="card-title">
                                <a href="{% url 'product_detail' product.id %}" class="text-decoration-none text-dark">{{ product.name }}</a>
                            </h5>
                            <div class="mb-2">
                                <span class="price">¥{{ product.price }}</span>
                                {% if product.original_price and product.original_price > product.price %}
                                <span class="original-price">¥{{ product.original_price }}</span>
                                {% endif %}
                            </div>
                            <p class="card-text text-muted">{{ product.description|default:product.name|truncatechars:50|safe }}</p>
                        </div>
                        <div class="card-footer bg-white">
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">{{ product.store_name }}</small>
                                <a href="{% url 'product_detail' product.id %}" class="btn btn-sm btn-outline-primary">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12">
                    <div class="alert alert-info">暂无商品，请查看其他分类</div>
                </div>
                {% endfor %}
            </div>
            
            <!-- 分页 -->
            {% if page_obj.has_other_pages %}
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1" aria-label="First">
                            <span aria-hidden="true">&laquo;&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="First">
                            <span aria-hidden="true">&laquo;&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% endif %}
                    
                    {% for i in page_obj.paginator.page_range %}
                        {% if page_obj.number == i %}
                        <li class="page-item active"><a class="page-link" href="#">{{ i }}</a></li>
                        {% elif i > page_obj.number|add:'-3' and i < page_obj.number|add:'3' %}
                        <li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
                        {% endif %}
                    {% endfor %}
                    
                    {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}" aria-label="Last">
                            <span aria-hidden="true">&raquo;&raquo;</span>
                        </a>
                    </li>
                    {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Last">
                            <span aria-hidden="true">&raquo;&raquo;</span>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 排序时保留页码和其他参数
    document.querySelectorAll('.sort-btn').forEach(btn => {
        btn.addEventListener('click', function(event) {
            event.preventDefault();
            
            // 获取当前URL并解析参数
            const url = new URL(window.location.href);
            const params = new URLSearchParams(url.search);
            
            // 获取按钮中的排序参数（从href中提取）
            const sortParam = new URL(this.href).searchParams.get('sort');
            
            // 更新排序参数
            params.set('sort', sortParam);
            
            // 跳转到更新后的URL
            window.location.href = `${url.pathname}?${params.toString()}`;
        });
    });
</script>
{% endblock %} 